<template>
  <view class="uni-padding-wrap">
    <view class="header"> </view>
    <view class="list-container">
      <view class="scroll-container">
        <scroll-view
          :scroll-top="scrollTop1"
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper1"
          @scrolltolower="lower1"
          @scroll="scroll1"
          @tap="getType1"
        >
          <view
            v-for="(item, index) in allFathers"
            :key="index"
            :id="JSON.stringify(item)"
            :class="[item.selected ? 'selected' : '', 'item']"
            >{{ item.name }}</view
          >
        </scroll-view>
      </view>
      <view class="scroll-container">
        <scroll-view
          :scroll-top="scrollTop2"
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper2"
          @scrolltolower="lower2"
          @scroll="scroll2"
          @tap="getType2"
        >
          <view
            v-for="(item, index) in allSonsReady"
            :key="index"
            :id="JSON.stringify(item)"
            :class="[item.selected ? 'selected' : '', 'item']"
            >{{ item.name }}</view
          >
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      scrollTop1: 0,
      scrollTop2: 0,
      old: {
        scrollTop1: 0,
        scrollTop2: 0
      },
      currentFather: null,
      list: [
        { father: 0, name: '火锅', id: '1', selected: false },
        { father: 0, name: '炒菜', id: '2', selected: false },
        { father: 0, name: '西餐', id: '3', selected: false },
        { father: 1, name: '四川火锅', id: '4', selected: false },
        { father: 1, name: '重庆火锅', id: '5', selected: false },
        { father: 1, name: '北京火锅', id: '6', selected: false },
        { father: 1, name: '东北火锅', id: '7', selected: false },
        { father: 1, name: '西藏火锅', id: '8', selected: false },
        { father: 2, name: '川菜', id: '9', selected: false },
        { father: 2, name: '鲁菜', id: '10', selected: false },
        { father: 2, name: '淮扬菜', id: '11', selected: false },
        { father: 2, name: '粤菜', id: '12', selected: false },
        { father: 3, name: '法国菜', id: '13', selected: false },
        { father: 3, name: '日式料理', id: '14', selected: false },
        { father: 3, name: '东南亚料理', id: '15', selected: false }
      ]
      // fatherSelected:[//已经选择的一级分类
      // ],
      // sonSelected:[]
    };
  },
  computed: {
    allFathers() {
      //所有等待选择father
      return this.list.filter((item) => item.father == 0);
    },
    allSonsSelected() {
      //所有已经选择的son
      return this.list.filter((item) => item.father != 0).filter((item) => item.selected);
    },
    allFathersSelected() {
      //所有已经选择的father
      return this.allFathers.filter((item) => item.selected);
    },
    allSonsReady() {
      //所有等待选择的son
      let allFathersSelectedId = this.allFathersSelected.map((item) => item.id);
      return this.list.filter((item) => item.father != 0).filter((item) => allFathersSelectedId.indexOf('' + item.father) != -1);
    },
    myheight() {
      let height = 0,
        top = 150, //顶部预留 单位ups
        bottom = 100, //底部预留 单位ups
        times = 1.8; //uni.getSystemInfoSync().windowHeight太小了，给个翻倍系数

      try {
        height = uni.getSystemInfoSync().windowHeight * times;
      } catch (e) {
        height = 750 * times;
      }
      return uni.upx2px(height - top - bottom) + 'px';
    }
  },
  onLoad() {},
  methods: {
    // 到顶了
    upper1(e) {
      console.log('到顶了1', e);
    },
    upper2(e) {
      console.log('到顶了2', e);
    },
    // 到底了
    lower1(e) {
      console.log('到底了1', e);
    },
    lower2(e) {
      console.log('到底了2', e);
    },
    //滑动的时候触发
    scroll1(e) {
      this.old.scrollTop1 = e.detail.scrollTop;
    },
    scroll2(e) {
      this.old.scrollTop2 = e.detail.scrollTop;
    },
    getSelected() {
      const selectedList = this.list.filter((item) => item.father != 0).filter((item) => item.selected);
      this.$emit('select', selectedList);
    },
    getType1(e) {
      this.currentFather = e.target.id ? JSON.parse(e.target.id) : null;
      if (this.currentFather) {
        //点在了item上
        this.list.forEach((item) => {
          //对他的选择状态取反
          if (item.id == this.currentFather.id) {
            item.selected = !item.selected;
          } else {
            item.selected = false;
          }
        });
        //不管是取消还是选择，他的son都应该设置为false
        this.list
          .filter((item) => item.father !== 0)
          .forEach((item) => {
            item.selected = false;
          });
        this.getSelected();
      }
      console.log(this.list, 'list========');
    },
    getType2(e) {
      let current = e.target.id ? JSON.parse(e.target.id) : false;
      let list = this.list;
      if (current) {
        list.forEach((item) => {
          if (item.id == current.id) {
            item.selected = !item.selected;
          }
        });
      }
      this.list = list;
      this.getSelected();
    }
  }
};
</script>

<style lang="scss" scoped>
.uni-padding-wrap {
  padding: 24rpx;
  height: 40vh;
  overflow: hidden;
}
.item {
  padding: 6rpx 8rpx;
  margin: 4rpx 0;
}
.selected {
  background-color: $bg-color-button;
}
.scroll-Y {
  height: 100%;
}
.list-container {
  display: flex;
  justify-content: space-between;
  margin-top: 42rpx;
  .scroll-container {
    height: 100%;
    margin: 0 12rpx;
  }
  > view {
    width: 50%;
  }
}
</style>
